<template>
  <div style="font-size: 0.35rem;">
    <div style="height: 1rem; line-height: 1rem">
      <span @click="back" style="margin-left: 0.5rem"><</span>
      <span style="margin-left: 2.4rem; text-align: center">我的医生</span>
    </div>
    <div style="background: #efefef;height: 11.8rem;">
      <div v-if="allPrice">
        <van-tabs v-model:active="active">
          <van-tab title="服务过我的医生">
            <div v-for="(item, index) in dof" :key="index">
              <div style="margin-left: 0.4rem;margin-right: 0.4rem;padding-top: 0.4rem;padding-left: 0.4rem;width: 6.7rem;height: 2.5rem;background: #fff;">
                <div style="float: left;margin-right: 0.3rem;height: 2.5rem;">
                  <img src="https://u.miaoshoucdn.com/avatar/003/64/27/003642720_mid.jpg" style="width: 1.2rem;height: 1.2rem;border-radius: 50%;" alt="" />
                </div>
                <div>
                  <p>
                    <span style="font-weight: bold;">{{ item.doctorname }}</span> {{ item.doctorstate }}
                  </p>
                  <p>{{ item.doctorcity }} &nbsp;&nbsp;&nbsp; {{ item.doctoradministre }}</p>
                  <p style="color: #c1c1c1;font-size: 0.3rem;">最近在线：{{ item.doctortime }} 小时前</p>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="我关注的医生">
            <DoctorCard></DoctorCard>
          </van-tab>
        </van-tabs>
      </div>
      <div v-else>
        <van-tabs v-model:active="active">
          <van-tab title="服务过我的医生"
            ><div>
              <van-empty description="暂无服务过我的医生" />
            </div>
            <p style="margin-left: 1rem; margin-top: 1rem; font-size: 0.4rem">
              <span style="color: red; font-size: 0.4rem">30W+</span
              >注册医生，<span style="color: red; font-size: 0.4rem">2万+</span
              >名医专家
            </p>
            <p style="margin-left: 0.6rem; font-size: 0.3rem">
              找到即可绑定医生，医生可提供门诊预约、在线咨
            </p>
            <p style="margin-left: 0.8rem; font-size: 0.3rem">
              询、开方续方、健康随访和科普健康知识服务
            </p>
            <button class="but">去报到医生</button></van-tab
          >
          <van-tab title="我关注的医生"
            ><div>
              <van-empty description="暂无我关注的医生" />
            </div>
            <button class="but">去关注医生</button></van-tab
          >
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import axios from 'axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import DoctorCard from '@/components/DoctorCard/index.vue';
const router = useRouter()
const activeKey = ref('1')
const back = () => {
  router.push('/ding/dingd')
}

const allPrice = localStorage.getItem('allPrice')
const datalist = ref('')
const imgdata = ref()
const dof=ref()
if (allPrice) {
  const doctorname = localStorage.getItem('doctorname')
  console.log(doctorname)
  const doctoradministre = localStorage.getItem('doctoradministre')
  console.log(doctoradministre)
  const doctorcity = localStorage.getItem('doctorcity')
  console.log(doctorcity)
  const doctorstate = localStorage.getItem('doctorstate')
  console.log(doctorstate)
  datalist.value = {
    doctorname,
    doctoradministre,
    doctorcity,
    doctorstate,
  }

  console.log(datalist.value)

  const getdata = async () => {
    await axios
      .get('/api/hospital', {
        params: {
          doctorname: datalist.value.doctorname,
          doctoradministre: datalist.value.doctoradministre,
          doctorcity: datalist.value.doctorcity,
          doctorstate: datalist.value.doctorstate,
        },
      })
      .then(res => {
        imgdata.value = res.data.data
        // console.log(imgdata.value)
        // console.log(imgdata.value.slice(0, 3))
        // console.log(imgdata.value.slice(0, 3)[0].doctorname)
        const name = imgdata.value.filter((item: any) => {
          return (
            item.doctorname == doctorname &&
            item.doctoradministre == doctoradministre
          )
        })
        console.log(name)
        console.log(JSON.stringify(name))
        dof.value = JSON.parse(JSON.stringify(name))
      })
      console.log(dof.value[0].doctorname)
  }
  getdata()
  
}

</script>
<style scoped>
.but {
  width: 6rem;
  height: 0.8rem;
  background-color: #286cf5;
  color: white;
  border-radius: 0.1rem;
  border: none;
  margin-left: 0.7rem;
  margin-top: 0.5rem;
  font-size: 0.35rem;
}
</style>
